<template>
  <div>
    <div class="trade">
      <nav-bar :bar-list="barList" :show-container="false"></nav-bar>
      <div class="line" ref="actMenu"></div>
      <!-- <trade-item @broadCastRed="broadCastRed"></trade-item> -->
      <div class="trade-item">
        <!-- 顶部菜单 -->
        <div class="top-bar" @click="changeUserFlag">
          <div class="left">{{userFlagName}}</div>
          <div class="right">
            <span>切换身份</span>
            <img src="/src/assets/icons/switch-change.png">
          </div>
        </div>
        <!-- 中部菜单 -->
        <!-- <mt-navbar v-model="selected">
          <mt-tab-item v-for="(nav, index) in subTab" :id="nav.num" :key="index" class="navbar" @click.native="routerTo()">
            <mt-badge slot="icon" type="error" size="small" class="custom-badge" v-if="nav.badgeShow"></mt-badge>
            {{nav.title}}
            <img :src="`/src/assets/trade/small-bell-${nav.num === selected ? 'white' : 'blue'}.png`" @click.stop="changeUserFlag">
          </mt-tab-item>
        </mt-navbar> -->
        <!-- slide-menu -->
        <div class="slide-menu-bg">
          <div class="slide-menu" :class="{fixed: menuFix}">
            <div class="slide">
              <div class="scroll" ref="scrollMenu">
                <span 
                  v-for="(t, i) in tags" :key="i" 
                  :class="{on: catId === t.id, badge: false, long: ifLong}" 
                  @click="tabSelect(t.id)"
                  v-if="Number(t.id) !== 9 || (Number(t.id) === 9 && selected !== '2')"
                >
                  {{t.name}}
                  <a v-if="ifLong && (Number(t.id) !== 9 && Number(t.id) !== 0)">({{t.selling_cnt}})</a>
                </span>
              </div>
              <img src="/src/assets/icons/open-menu.png" class="open-menu" @click="openMenu">
            </div>
          </div>
        </div>
        <!-- 筛选 -->
        <div class="select" :class="{open: menuShow}">
          <div class="modal" @click="closeMenu"></div>
          <div class="content">
            <div class="title">
              全部分类
              <img src="/src/assets/icons/close.png" @click="closeMenu">
            </div>
            <div class="flex">
              <div class="item"
                v-for="(t, i) in tags" :key="i"
                :class="{on: catId === t.id}"
                @click="tabSelect(t.id)"
                v-if="Number(t.id) !== 9 || (Number(t.id) === 9 && selected !== '2')"
              >
                {{t.name}}
                <span v-if="Number(t.id) !== 9 && ifLong">({{t.selling_cnt}})</span>
              </div>
              <div class="item no-bg" v-if="(selected === '1' && tags.length % 4 !== 0) || (selected === '2' && (tags.length - 1) % 4 !== 0)"></div>
            </div>
          </div>
        </div>

        <mt-tab-container v-model="selected">
          <!-- 我要买 -->
          <mt-tab-container-item id="1">
            <!-- 我要买提醒 -->
            <div class="buy-hint" v-if="Number(category.id) !== 0">
              <div class="detail">
                <span class="bold">出售中：{{category.selling_cnt}}个</span>
                <span>已成交：{{category.sold_cnt}}单</span>
              </div>
            </div>
            <div class="search-input">
              <img src="/src/assets/trade/search.png">
              <mt-field label="" placeholder="请输入要搜索券的名称" v-model="searchInput"></mt-field>
              <span class="v-line"></span>
              <span class="text" @click="searchBuy">搜索</span>
            </div>
            <!-- 卡片 -->
            <!-- <div class="trade-card" ref="wrapper" :style="{height: buyHeight + 'px'}" @scroll="scrolls"> -->
            <div class="trade-card" ref="wrapper">
              <div class="nothing" v-if="!buyList">暂无数据</div>
              <!-- 属性卡片 -->
              <div class="block"
                v-for="(g, k) in buyList" :key="g.id"
                :class="{disabled: Number(g.selling_cnt) === 0 && !isPlatform}"
                @click="$router.push({name: 'BuyDetail', params: {id: g.id}})"
              >
                <div class="big-title">
                  <span>{{g.name}}</span>
                  <span class="red">¥ {{g.sell_price}}</span>
                </div>
                <div class="flex">
                  <div class="item">
                    <img :src="g.image">
                    <span class="text">{{g.suffix_name}}</span>
                  </div>
                  <div class="item right">
                    <span class="text line-through">市场价：¥{{g.market_price}}</span>
                  </div>
                </div>
                <div class="hint" v-html="g.hint_text"></div>
                <div class="line"></div>
                <div class="flex">
                  <div class="item">
                    <img
                      :src="`/src/assets/icons/heart-${g.if_attention ? 'red' : 'gray'}.png`"
                      @click.stop="buyAttention(g.id, g.if_attention)"
                    >
                    <span class="text" :class="{red: g.if_attention}">{{g.attention_cnt}}</span>
                  </div>
                  <div class="item right">
                    <span class="text bold" v-if="Number(category.id) !== 9">出售中：{{g.selling_cnt}}个</span>&nbsp;&nbsp;
                    <span class="text light" v-if="Number(category.id) !== 9">已成交：{{g.sold_cnt}}单</span>&nbsp;&nbsp;
                    <mt-button plain class="buy-btn" 
                      :disabled="Number(g.selling_cnt) === 0 && !isPlatform" 
                      @click.native.stop="showBuyPopup(g.id, k, g.hint_text)"
                    >购买</mt-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 购买层 -->
            <mt-popup v-model="popupVisible" position="middle">
              <div class="buy-window">
                <div class="buy-num">
                  <span class="text">购买数量：</span>
                  <div class="counter">
                    <span class="minus" :class="{disabled: buyNum <= 1}" @click="minus">—</span>
                    <span class="num"><input type="number" v-model="buyNum"></span>
                    <span class="plus" :class="{disabled: plusDis}" @click="plus">+</span>
                  </div>
                </div>
                <div class="hint">
                  <div class="title">温馨提示：</div>
                  <div class="desc">
                    <p class="red">1. {{hintText}}</p>
                    <p>2. 非券码质量问题，不接受纠纷申请</p>
                    <p>3. 如您第一次购买，请务必阅读商品详情</p>
                    <p>4. 请诚信交易，平台有权拒绝服务作弊用户</p>
                  </div>
                </div>
                <mt-button @click.native="doBuy" :disabled="buyBtnDisbaled" class="buy-btn">立即购买</mt-button>
              </div>
            </mt-popup>
          </mt-tab-container-item>
          <!-- 我要卖 -->
          <mt-tab-container-item id="2">
            <div class="search-input">
              <img src="/src/assets/trade/search.png">
              <mt-field label="" placeholder="请输入要搜索券的名称" v-model="searchInput"></mt-field>
              <span class="v-line"></span>
              <span class="text" @click="search">搜索</span>
            </div>
            <!-- 小卡片 -->
            <!-- <div class="card-group" :style="{height: sellHeight + 'px'}" @scroll="scrolls"> -->
            <div class="card-group">
              <div class="mini-card"
                v-for="v in sellList" :key="v.id"
                :class="{disabled: v.toplimit, 'is-new': v.is_new}"
                @click="sellGoods(v.id, v.prompt)"
              >
                <div class="title">
                  <span class="bold">{{v.name}}</span>
                  <span class="v-line"></span>
                  <span>{{v.suffix_name}}</span>
                </div>
                <div class="desc">
                  <span class="red">¥ {{v.buy_price}} <span class="small">起</span></span>
                  <img
                    :src="`/src/assets/icons/heart-${v.if_attention ? 'red' : 'gray'}.png`"
                    @click.stop="sellAttention(v.id, v.if_attention)"
                  >
                </div>
              </div>
            </div>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
      <router-link :to="{name: 'Share'}">
      <!-- <a href="/new_html/#/share"> -->
        <img src="/src/assets/icons/invite.png" alt="邀请有奖" class="invite-btn" ref="invite" @touchstart.stop="touchStart()" @touchmove.stop="touchMove($event)" @touchend.stop="touchEnd()">
      <!-- </a> -->
      </router-link>
      <!-- 抽奖 -->
      <!-- <turn-table ref="turnTable"></turn-table> -->
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'
  import swipe from '@/components/swipe'
  import NavBar from './NavBar'
  import TradeItem from './TradeItem'
  // import TurnTable from '@/container/other/CheckTurnTable'

  export default {
    name: 'Trade',
    components: {
      swipe,
      NavBar,
      TradeItem
      // TurnTable
    },
    data () {
      return {
        barList: [
          {num: '1', title: '权益播报', badgeShow: false, pathName: 'BroadCast', iconClass: 'nav-broadcast'},
          {num: '2', title: '券商合作', badgeShow: false, pathName: 'loading', iconClass: 'nav-cooperation'},
          {num: '3', title: '交易Q&A', badgeShow: false, pathName: 'Helper', iconClass: 'nav-qa'}
        ],
        image: [],
        isTrader: false,
        // 大菜单
        selected: '2',
        subTab: [],
        category: {},
        // 横滑选项
        tags: {},
        ifLong: true,
        // 活动卡片
        buyList: [],
        sellList: [],
        buyHeight: 0,
        sellHeight: 0,
        // 小菜单
        catId: 0,
        lastSellCatId: 0,
        lastBuyCatId: 0,
        // 中部菜单
        menuFix: false,
        // 购买层
        popupVisible: false,
        buyNum: 1,
        goodsIndex: 0,
        maxAmount: 0,
        actGid: 0,
        hintText: '',
        buyBtnDisbaled: false,
        // 身份
        userFlag: '',
        userFlagName: '',
        // 判断是否为平台商品
        isPlatform: false,
        // 卖搜索
        searchInput: '',
        // 菜单收放
        menuShow: false,
        // 窗口高度
        winHeight: document.documentElement.clientHeight,
        // 缓存
        windowScroll: 0
      }
    },
    watch: {
      buyNum (v) {
        this.buyBtnDisbaled = v > this.maxAmount
      }
    },
    computed: {
      plusDis () {
        return this.buyNum >= this.maxAmount
      }
    },
    methods: {
      getCarousel () {
        this.$post('/vue/carousel/get_list', {type: 3}).then(data => {
          this.image = data
        })
      },
      broadCastRed (v) {
        this.barList[0].badgeShow = v
      },
      touchStart (e) {},
      touchMove (e) {
        e.cancelBubble = true
        let dw = document.documentElement.clientWidth
        let dh = document.documentElement.clientHeight
        let pos = e.touches[0]
        let inv = this.$refs.invite
        let right = dw - pos.clientX - 36
        let bottom = dh - pos.clientY - 36
        if (right < 0) {
          right = 0
        } else if (right > dw - 72) {
          right = dw - 72
        }
        if (bottom < 58) {
          bottom = 58
        } else if (bottom > dh - 72) {
          bottom = dh - 72
        }
        inv.style.bottom = bottom + 'px'
        inv.style.right = right + 'px'
      },
      touchEnd (e) {},
      routerTo () {
        switch (Number(this.selected)) {
          case 1: // 我要买
            this.ifLong = true
            this.getBuyList()
            // 删除全部选项
            if (this.tags[this.tags.length - 1].id === 0) {
              this.tags.splice(this.tags.length - 1, 1)
            }
            break
          case 2: // 我要卖
            this.ifLong = false
            this.getSellList()
            break
        }
        let query = {}
        // 浅拷贝
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {tradeS: this.selected})
        this.$router.replace({query})
      },
      tabSelect (id) {
        this.searchInput = ''
        this.catId = id
        if (this.ifLong) {
          this.lastBuyCatId = id
          this.getBuyList()
        } else {
          this.lastSellCatId = id
          this.getSellList()
        }
        let query = {}
        // 浅拷贝
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {tradeT: id})
        this.$router.replace({query})
        // 菜单滚动
        for (let j = 0; j < this.tags.length; j++) {
          if (this.tags[j].id === id) {
            if (j > Math.ceil(this.tags.length / 2)) {
              this.$refs.scrollMenu.scrollLeft = this.$refs.scrollMenu.scrollWidth
            } else {
              this.$refs.scrollMenu.scrollLeft = 0
            }
            break
          }
        }
        this.closeMenu()
      },
      getTags () {
        this.$post('/vue/category/list', '').then(data => {
          // 横滑标签
          this.tags = data
          this.catId = this.$route.query.tradeT || data[0].id
          this.lastSellCatId = data[1].id
          this.lastBuyCatId = data[1].id
        })
      },
      getFlag () {
        // 获取买卖标签位置
        this.$post('/vue/setting/flag').then(data => {
          this.userFlag = data
          let flagName = {'buyer': '我要买', 'seller': '我要卖'}
          this.userFlagName = flagName[data]
          let tmp = []
          switch (data) {
            case 'buyer':
              // 切换菜单
              tmp = [
                {num: '1', title: '我要买', badgeShow: false},
                {num: '2', title: '我要卖', badgeShow: false}
              ]
              this.subTab = tmp
              if (this.$route.query.tradeS === undefined) {
                this.selected = '1'
                this.ifLong = true
                this.getBuyList()
              }
              break
            case 'seller':
              // 切换菜单
              tmp = [
                {num: '2', title: '我要卖', badgeShow: false},
                {num: '1', title: '我要买', badgeShow: false}
              ]
              this.subTab = tmp
              if (this.$route.query.tradeS === undefined) {
                this.selected = '2'
                this.ifLong = false
                this.getSellList()
              }
              break
          }
          // 标签选择
          if (this.$route.query.tradeS !== undefined) {
            this.selected = this.$route.query.tradeS
            switch (Number(this.selected)) {
              case 1: // 我要买
                this.ifLong = true
                this.getBuyList()
                break
              case 2: // 我要卖
                this.ifLong = false
                this.getSellList()
                break
            }
          }
          // 标题
          window.document.title = this.userFlagName
        })
      },
      getCommonList () {
        let params = {cat_id: this.$route.query.tradeT || 1}
        this.$post('/vue/goods/common_list', params).then(data => {
          let flagName = {'buyer': '我要买', 'seller': '我要卖'}
          this.userFlag = data.flag
          this.userFlagName = flagName[data.flag]
          switch (data.flag) {
            case 'buyer':
              this.selected = '1'
              this.ifLong = true
              this.buyList = data.goods
              this.category = data.category
              this.isPlatform = data.platform
              if (Number(params.cat_id) === 0) {
                this.category.id = 0
              }
              break
            case 'seller':
              this.selected = '2'
              this.ifLong = false
              this.sellList = data.goods
              // 修改红点
              this.$nextTick(() => {
                this.$emit('broadCastRed', data.rights_report_red)
              })
              break
          }
          if (Number(this.tags[this.tags.length - 1].id) !== 0) {
            this.tags.push({id: '0', name: '全部', selling_cnt: 0, sold_cnt: 0})
          }
          // 标题
          window.document.title = this.userFlagName
        })
      },
      getBuyList () {
        // if (Number(this.catId) === 0) {
        //   this.catId = this.lastBuyCatId
        // }
        let params = {cat_id: this.catId, word: this.searchInput}
        this.buyList = []
        this.$post('/vue/goods/list', params).then(data => {
          this.buyList = data.goods
          this.category = data.category
          this.isPlatform = data.platform
          if (Number(this.catId) === 0) {
            this.category.id = 0
          }
          // if (Number(this.tags[this.tags.length - 1].id) === 0) {
          //   this.tags.splice(this.tags.length - 1, 1)
          // }
          if (Number(this.tags[this.tags.length - 1].id) !== 0) {
            this.tags.push({id: '0', name: '全部', selling_cnt: 0, sold_cnt: 0})
          }
        })
      },
      getSellList () {
        if (Number(this.catId) === 9) {
          this.catId = this.lastSellCatId
        }
        let params = {cat_id: this.catId, word: this.searchInput}
        this.$post('/vue/goods/sys_buy_list', params).then(data => {
          this.sellList = data.goods
          // 修改红点
          this.$emit('broadCastRed', data.rights_report_red)
          if (Number(this.tags[this.tags.length - 1].id) !== 0) {
            this.tags.push({id: '0', name: '全部', selling_cnt: 0, sold_cnt: 0})
          }
        })
      },
      showBuyPopup (id, k, text) {
        this.popupVisible = true
        this.goodsIndex = k
        this.maxAmount = Number(this.buyList[this.goodsIndex].max_amount) > Number(this.buyList[this.goodsIndex].selling_cnt) ? Number(this.buyList[this.goodsIndex].selling_cnt) : Number(this.buyList[this.goodsIndex].max_amount)
        if (this.isPlatform) {
          this.maxAmount = 1
        }
        this.actGid = id
        this.hintText = text
      },
      minus () {
        if (this.buyNum <= 1) {
          return false
        }
        this.buyNum--
      },
      plus () {
        if (this.buyNum >= this.maxAmount) {
          return false
        }
        this.buyNum++
      },
      doBuy () {
        let params = {
          num: this.buyNum,
          act_gid: this.actGid
        }
        this.$post('/vue/goods/do_buy', params).then(data => {
          msg('下单成功')
          if (this.isPlatform) {
            this.$router.push({name: 'PayPlatform', params: {id: data.order_id}})
          } else {
            this.$router.push({name: 'Pay', params: {id: data.order_id}})
          }
        })
      },
      sellGoods (id, text) {
        if (text.trim().length !== 0) {
          msg(text)
          return false
        }
        this.$router.push({name: 'SellDetail', params: {id: id}})
      },
      // 关注和取消购买商品
      buyAttention (id, status) {
        let params = {act_gid: id}
        let url = ''
        if (status) {
          url = 'remove_manage'
        } else {
          url = 'add_to_manage'
        }
        this.$post(`/vue/goods/${url}`, params).then(data => {
          this.getBuyList()
        })
      },
      // 关注和取消关注出售商品
      sellAttention (id, status) {
        let params = {act_gid: id, status: !status ? 'yes' : 'no'}
        this.$post('/vue/goods/update_goods_collection', params).then(data => {
          this.getSellList()
        })
      },
      // 设置下次进入页面显示买家还是卖家
      changeUserFlag () {
        this.searchInput = ''
        let res = {'buyer': 1, 'seller': 2}
        let params = {flag: res[this.userFlag]}
        this.$post('/vue/setting/update_user_flag', params).then(data => {
          this.getFlag()
        })
      },
      // 卖商品搜索
      search () {
        this.$refs.scrollMenu.scrollLeft = this.$refs.scrollMenu.scrollWidth
        this.catId = '0'
        this.getSellList()
      },
      // 买商品搜索
      searchBuy () {
        this.$refs.scrollMenu.scrollLeft = this.$refs.scrollMenu.scrollWidth
        this.catId = '0'
        this.getBuyList()
      },
      openMenu () {
        this.menuShow = true
      },
      closeMenu () {
        this.menuShow = false
      },
      scrolls (e) {
        if (this.$refs.actMenu.getBoundingClientRect().top <= 40) {
          this.menuFix = true
        } else {
          this.menuFix = false
        }
        this.windowScroll = document.documentElement.scrollTop
        // document.querySelector('.trade').scrollTop = e.target.scrollTop
      }
    },
    // 缓存
    activated () {
      document.documentElement.scrollTop = this.windowScroll
      // this.$refs.turnTable.isCheck()
    },
    mounted () {
      this.getTags()
      this.getCommonList()
      this.wechatShare({userShare: true})
      // 监听
      window.addEventListener('scroll', this.scrolls)
    },
    destroyed () {
      window.removeEventListener('scroll', this.scrolls)
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-80: rgb(80, 80, 80);
  @c-124: rgb(124, 124, 124);
  @c-142: rgb(142, 142, 142);
  @c-150: rgb(150, 150, 150);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-246: rgb(246, 246, 246);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-blue: rgb(108, 184, 222);
  @c-light-blue: rgb(240, 244, 247);
  @c-d-blue: rgb(204, 219, 231);
  @c-orange: rgb(245, 166, 35);

  .trade {
    padding-top: 40px;
    padding-bottom: 58px;
    // height: calc(~'100vh - 98px');
    overflow-x: hidden;
    * {
      outline: 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-tap-highlight-color: transparent;
    }
    .card-swipe {
      padding: 12px;
      height: 88px;
      background-color: #FFF;
      .mint-swipe-items-wrap {
        border-radius: 8px;
      }
    }
    .line {
      height: 8px;
    }
    .invite-btn {
      width: 72px;
      height: 72px;
      position: fixed;
      bottom: 64px;
      right: 10px;
    }
    .trade-item {
      background-color: #FFF;
      .top-bar {
        padding: 8px 12px;
        background-color: @c-blue;
        color: #FFF;
        display: flex;
        justify-content: space-between;
        position: fixed;
        z-index: 2;
        left: 0;
        right: 0;
        top: 0;
        .left {
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
        .right {
          font-size: 11px;
          line-height: 24px;
          font-weight: 100;
          display: flex;
          align-items: center;
          align-content: center;
          img {
            width: 24px;
            height: 24px;
            margin-left: 10px;
          }
        }
      }
      .mint-navbar {
        .mint-tab-item {
          padding: 12px 0;
          font-size: 15px;
          line-height: 24px;
          color: @c-blue;
          &.is-selected {
            border-bottom: 0;
            color: #FFF;
            margin-bottom: 0px;
            background-color: @c-blue;
          }
          .mint-tab-item-label {
            font-size: 15px;
            line-height: 24px;
            img {
              width: 14px;
              height: 14px;
              display: none;
              margin-left: 4px;
            }
          }
          .mint-tab-item-icon {
            width: auto;
            height: auto; 
            position: relative;
            .mint-badge {
              width: 8px;
              height: 8px;
              right: 28%;
              top: -3px;
              border-radius: 100%;
              padding: 0;
              position: absolute;
            }
          }
          &:first-child {
            .mint-tab-item-label img {
              display: inline;
            }
          }
        }
      }
      /* ---滑动菜单--- */
      .slide-menu-bg {
        height: 50px;
      }
      .slide-menu {
        color: #a9a9a9;
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        background-color: #FFF;
        position: relative;
        &.fixed {
          position: fixed;
          z-index: 2;
          top: 40px;
          left: 0;
          right: 0;
        }
        .slide {
          display: flex;
          .scroll {
            flex: 1;
            display: flex;
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-overflow-scrolling : touch;
          }
          span {
            flex:  0 0 auto;
            width: calc(100vw / 6);
            min-width: 54px;
            font-size: 13px;
            line-height: 24px;
            padding: 12px 0;
            position: relative;
            /* &:first-child {
              width: 76px;
            } */
            &.on {
              border-bottom: 1px solid #6cb8de;
              color: #6cb8de;
            }
            &.badge::after {
              content: '';
              position: absolute;
              top: 12px;
              right: 0px;
              width: 8px;
              height: 8px;
              border-radius: 100%;
              background-color: rgb(255, 89, 22);
            }
            &.long {
              width: calc(100vw / 4.69);
            }
          }
          .open-menu {
            flex: 0 0 auto;
            width: 24px;
            height: 24px;
            padding: 12px;
            background-color: #FFF;
          }
        }
      }
      .select {
        position: fixed;
        z-index: 10;
        top: 40px;
        left: 0;
        right: 0;
        bottom: 0;
        transition: 0.25s all;
        height: 0;
        overflow: hidden;
        &.open {
          height: calc(~'100% - 40px');
        }
        .content {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          z-index: 20;
          background-color: rgb(250, 250, 250);
          padding: 15px 12px 30px;
          .title {
            display: flex;
            font-size: 14px;
            line-height: 24px;
            justify-content: center;
            color: @c-124;
            position: relative;
            margin-bottom: 15px;
            img {
              position: absolute;
              right: 0;
              top: 0;
            }
          }
          .flex {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item {
              width: calc(~'100% / 4.5');
              flex: 0 0 auto;
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
              background-color: @c-light-blue;
              margin-bottom: 15px;
              border-radius: 6px;
              padding: 3px 0;
              &.on {
                background-color: @c-d-blue;
              }
              &.no-bg {
                background-color: transparent;
              }
            }
          }
          img {
            width: 24px;
            height: 24px;
          }
        }
        .modal {
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.4);
          position: absolute;
          z-index: 15;
        }
      }
      /* ---我要买提醒--- */
      .buy-hint {
        text-align: left;
        .detail {
          padding: 4px 12px;
          background-color: @c-light-blue;
          font-size: 12px;
          line-height: 24px;
          color: @c-150;
          .bold {
            font-weight: bold;
            color: @c-124;
            margin-right: 24px;
          }
        }
        .hint {
          background-color: #FFF;
          padding: 12px;
          font-size: 12px;
          .title　{
            color: @c-orange;
            line-height: 24px;
          }
          p {
            line-height: 20px;
            color: @c-169;
          }
        }
      }
      /* ---卡片样式--- */
      .trade-card {
        background: #FFF;
        text-align: left;
        overflow-x: hidden;
        overflow-y: scroll;
        position: relative;
        -webkit-overflow-scrolling: touch;
        .nothing {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 100%;
          height: 0;
          text-align: center;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
        }
        .block {
          padding: 12px 12px 8px;
          margin-top: 12px;
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          text-align: left;
          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
          border-top: 1px solid #f1f1f1;
          &:first-child {
            margin-top: 3px;
          }
          .flex {
            display: flex;
            justify-content: space-between;
            .item {
              flex: 0 0 auto;
              display: flex;
              &.right {
                text-align: right;
              }
            }
          }
          img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 4px;
          }
          .text {
            font-size: 13px;
            line-height: 24px;
            color: @c-124;
            vertical-align: middle;
            &.red {
              font-size: 12px;
              color: @c-red;
            }
            &.bold {
              font-size: 12px;
              font-weight: bold;
            }
            &.light {
              font-size: 12px;
              color: @c-169;
            }
          }
          .line-through {
            color: @c-169;
            text-decoration: line-through;
          }
          .hint {
            font-size: 13px;
            line-height: 24px;
            color: @c-dark-red;
          }
          .line {
            width: 100%;
            height: 1px;
            margin: 8px 0;
            background-color: @c-235;
          }
          .big-title {
            font-size: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            span {
              flex: 1;
              &.red {
                font-size: 16px;
                color: @c-red;
                text-align: right;
              }
            }
          }
          .title {
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 12px;
          }
          .buy-btn {
            width: 80px;
            height: 24px;
            padding: 0;
            line-height: 0;
            border: 2px solid @c-blue;
            border-radius: 16px;
            vertical-align: middle;
            box-sizing: border-box;
            .mint-button-text {
              font-size: 13px;
              line-height: 20px;
              color: @c-blue;
            }
            &.is-disabled {
              background-color: @c-226;
              border: 0;
              .mint-button-text {
                color: #FFF;
              }
            }
          }
        }
      }
      /* ---弹层购买--- */
      .mint-popup {
        border-radius: 24px;
      }
      .buy-window {
        margin: 32px 12px;
        width: 75vw;
        .buy-num {
          display: flex;
          justify-content: space-between;
          .text {
            font-size: 13px;
            line-height: 24px;
            color: @c-124;
            font-weight: bold;
            padding: 4px 0;
          }
        }
        .counter {
          font-size: 0;
          span {
            display: inline-block;
            width: 32px;
            height: 32px;
            font-size: 13px;
            line-height: 24px;
            color: @c-124;
            border: 1px solid @c-226;
            box-sizing: border-box;
            vertical-align: middle;
            &.minus {
              line-height: 32px;
              color: @c-80;
            }
            &.plus {
              font-size: 20px;
              line-height: 32px;
              color: @c-80;
            }
            &.num {
              width: 64px;
              line-height: 32px;
              border-left: 0;
              border-right: 0;
              input {
                display: block;
                width: 100%;
                line-height: 30px;
                border: 0;
                text-align: center;
              }
            }
            &.disabled {
              color: @c-226;
            }
          }
        }
        .hint {
          text-align: left;
          background-color: #FFF;
          padding: 24px 0;
          font-size: 12px;
          .title　{
            color: @c-orange;
            line-height: 24px;
          }
          .desc {
            line-height: 20px;
            color: @c-169;
            .red {
              color: @c-dark-red; 
            }
          }
        }
        .buy-btn {
          width: 168px;
          height: 40px;
          padding: 0;
          background-color: @c-blue;
          border-radius: 20px;
          font-size: 13px;
          lighting-color: 24px;
          color: #FFF;
        }
      }
      /* ---我要卖--- */
      .search-input {
        margin: 6px 12px;
        padding: 6px 12px;
        background-color: rgba(194, 194, 194, 0.12);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        img {
          width: 24px;
          height: 24px;
          flex: 0 0 auto;
        }
        .mint-field {
          flex: 1;
          min-height: auto;
          background-color: transparent;
          .mint-cell-wrapper {
            padding: 0;
            line-height: 0;
            background-image: none;
            .mint-cell-value {
              .mint-field-core {
                font-size: 12px;
                line-height: 22px;
                background-color: transparent;
                color: @c-blue;
                &::-webkit-input-placeholder {
                  color: #BBB;
                }
              }
            }
          }
        }
        .v-line {
          flex: 0 0 auto;
          display: block;
          width: 1px;
          height: 12px;
          margin: 0 12px;
          background-color: @c-226;
        }
        .text {
          flex: 0 0 auto;
          font-size: 13px;
          line-height: 24px;
          color: @c-142;
        }
      }
      .card-group {
        min-height: calc(~'100vh - 302px');
      }
      .mini-card {
        padding: 12px;
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: space-between;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        margin-bottom: 8px;
        &:first-child {
          margin-top: 2px;
        }
        &.disabled {
          background-color: @c-light-blue;
        }
        &.is-new {
          background-image: url('/src/assets/icons/label-red.png');
          background-repeat: no-repeat;
          background-size: 24px 24px;
          background-position: left top;
        }
        .title {
          flex: 0 0 auto;
          width: 60%;
          text-align: left;
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          display: flex;
          span {
            flex: 0 0 auto;
          }
          .bold {
            font-size: 15px;
            font-weight: bold;
          }
          .v-line {
            width: 1px;
            height: 24px;
            flex: 0 0 auto;
            background-color: @c-226;
            margin: 0 8px;
          }
        }
        .desc {
          flex: 0 0 auto;
          width: 40%;
          font-size: 15px;
          line-height: 24px;
          color: @c-red;
          display: flex;
          justify-content: flex-end;
          span {
            vertical-align: middle;
          }
          img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 8px;
          }
          .small {
            font-size: 12px;
          }
        }
      }
    }
  }
  .mint-toast {
    z-index: 2500;
  }
</style>